:root {
  --button-default-text-color: #555;
  --button-primary-text-color: var(--color-on-primary);
  --button-danger-text-color: var(--color-on-danger);
  --button-success-text-color: var(--color-on-success);
  --button-warning-text-color: var(--color-on-warning);
  --button-info-text-color: var(--color-on-info);
  --button-default-color: #f5f5f5;
  --button-primary-color: var(--color-primary);
  --button-danger-color: var(--color-danger);
  --button-success-color: var(--color-success);
  --button-warning-color: var(--color-warning);
  --button-info-color: var(--color-info);
  --button-default-icon-color: #555;
  --button-primary-icon-color: var(--color-on-primary-container);
  --button-danger-icon-color: var(--color-on-danger-container);
  --button-success-icon-color: var(--color-on-success-container);
  --button-warning-icon-color: var(--color-on-warning-container);
  --button-info-icon-color: var(--color-on-info-container);
  --button-default-icon-container-color: #f5f5f5;
  --button-primary-icon-container-color: var(--color-primary-container);
  --button-danger-icon-container-color: var(--color-danger-container);
  --button-success-icon-container-color: var(--color-success-container);
  --button-warning-icon-container-color: var(--color-warning-container);
  --button-info-icon-container-color: var(--color-info-container);
  --button-disabled-color: var(--color-disabled);
  --button-disabled-text-color: var(--color-text-disabled);
  --button-border-radius: 4px;
  --button-mini-padding: 0 8px;
  --button-small-padding: 0 12px;
  --button-normal-padding: 0 16px;
  --button-large-padding: 0 22px;
  --button-round-padding: 6px;
  --button-mini-height: 20px;
  --button-small-height: 28px;
  --button-normal-height: 36px;
  --button-large-height: 44px;
  --button-mini-font-size: var(--font-size-xs);
  --button-small-font-size: var(--font-size-sm);
  --button-normal-font-size: var(--font-size-md);
  --button-large-font-size: var(--font-size-lg);
}

.var-button {
  position: relative;
  justify-content: center;
  align-items: center;
  outline: none;
  border: none;
  border-radius: var(--button-border-radius);
  user-select: none;
  cursor: pointer;
  font-family: inherit;
  transition: box-shadow 0.2s, background-color 0.25s, border-radius 0.2s;
  will-change: box-shadow;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;

  &:active {
    box-shadow: 0 3px 5px -1px var(--shadow-key-umbra-opacity), 0 5px 8px 0 var(--shadow-key-penumbra-opacity),
      0 1px 14px 0 var(--shadow-key-ambient-opacity);
  }

  &__content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  &__loading[var-button-cover] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  &--default {
    color: var(--button-default-text-color);
    background-color: var(--button-default-color);
  }

  &--primary {
    color: var(--button-primary-text-color);
    background-color: var(--button-primary-color);
  }

  &--info {
    color: var(--button-info-text-color);
    background-color: var(--button-info-color);
  }

  &--success {
    color: var(--button-success-text-color);
    background-color: var(--button-success-color);
  }

  &--warning {
    color: var(--button-warning-text-color);
    background-color: var(--button-warning-color);
  }

  &--danger {
    color: var(--button-danger-text-color);
    background-color: var(--button-danger-color);
  }

  &--loading {
    cursor: default;
  }

  &--block {
    width: 100%;
  }

  &--text-default {
    color: inherit;
  }

  &--text-primary {
    color: var(--button-primary-color);
  }

  &--text-info {
    color: var(--button-info-color);
  }

  &--text-success {
    color: var(--button-success-color);
  }

  &--text-warning {
    color: var(--button-warning-color);
  }

  &--text-danger {
    color: var(--button-danger-color);
  }

  &--icon-container-default {
    color: var(--button-default-icon-color);
    background-color: var(--button-default-icon-container-color);
  }

  &--icon-container-primary {
    color: var(--button-primary-icon-color);
    background-color: var(--button-primary-icon-container-color);
  }

  &--icon-container-info {
    color: var(--button-info-icon-color);
    background-color: var(--button-info-icon-container-color);
  }

  &--icon-container-success {
    color: var(--button-success-icon-color);
    background-color: var(--button-success-icon-container-color);
  }

  &--icon-container-warning {
    color: var(--button-warning-icon-color);
    background-color: var(--button-warning-icon-container-color);
  }

  &--icon-container-danger {
    color: var(--button-danger-icon-color);
    background-color: var(--button-danger-icon-container-color);
  }

  &--normal {
    height: var(--button-normal-height);
    padding: var(--button-normal-padding);
    font-size: var(--button-normal-font-size);
  }

  &--large {
    height: var(--button-large-height);
    padding: var(--button-large-padding);
    font-size: var(--button-large-font-size);
  }

  &--small {
    height: var(--button-small-height);
    padding: var(--button-small-padding);
    font-size: var(--button-small-font-size);
  }

  &--mini {
    height: var(--button-mini-height);
    padding: var(--button-mini-padding);
    font-size: var(--button-mini-font-size);
  }

  &--round {
    padding: var(--button-round-padding);
    border-radius: 50%;
    height: auto;
  }

  &--outline {
    border: thin solid currentColor;
  }

  &--hidden {
    opacity: 0;
  }

  &--disabled {
    background-color: var(--button-disabled-color);
    color: var(--button-disabled-text-color);
    cursor: not-allowed;
    box-shadow: none !important;
  }

  &--text-disabled {
    color: var(--button-disabled-text-color);
  }

  &--text {
    background-color: transparent;

    &:active {
      box-shadow: none;
    }
  }
}
